﻿<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Fancy Validate - qtip | http://www.cnblogs.com/lwme/archive/2012/02/16/qtip2-jquery-plugin.html</title>
  <link href="css/jquery.qtip.min.css" rel="stylesheet" />
  <script src="../jquery.js"></script>
  <script src="js/jquery.qtip.min.js"></script>
  <script>
    $(function() {
      // 从链接的title提取提示
      $("#demo1 a[title], #demo1 img[alt]").qtip();


      // 创建提示
      $("#demo2").qtip({
        content: "提示信息提示信息",hide: {
			  event: 'mouseenter'
		 }
      });

      // 创建提示，含标题
      $("#demo3").qtip({
        content: {
          text: "提示信息提示信息"
          , title: "提示标题"
        }
      });

      // ajax 获取内容
      $("#demo4 a[rel]").each(function() {
        $(this).qtip({
          content: {
            text: "加载中...",
            ajax: {
              url: $(this).attr("rel")
            }
          }
        });
      });

      // 位置及样式
      $("#demo5 a[title]").qtip({
        position: {
          my: 'bottom left',
          at: 'top center'
        },
        style: {
          classes: 'ui-tooltip-light'
        }
      });

      // 阴影+圆角
      $("#demo6 a[title]").qtip({
        content: {
    text: "这是提示内容（by囧月 lwme.cnblogs.com）"
    , title: {
      text: "提示标题"
      , button: "关闭"
    }
  },show: {
    event: 'mouseenter', // Show it on click...
    solo: true, // ...and hide all other tooltips...
  },
		position: {
          my: 'bottom left',
          at: 'top left'
        },
        style: {
          classes: 'ui-tooltip-rlight ui-tooltip-shadow ui-tooltip-rounded'
        },hide: {
			  event: 'mouseenter'
		 }
      });
    });
  </script>
</head>
<body>
  <h1>qtip 提示效果 (鼠标移到链接/图片上查看)</h1>
  <hr />
  <p id="demo1">
    In <a href="http://craigsworks.com/wiki/Quantum_mechanics" title="Wikipedia: Quantum mechanics">quantum mechanics</a>, the <b>Heisenberg uncertainty principle</b> states by precise inequalities that certain
    pairs of physical properties, such as position and <a href="http://craigsworks.com/wiki/Momentum" title="Wikipedia: Momentum">momentum</a>, cannot be simultaneously known to arbitrarily high precision.
    That is, the more precisely one property is measured, the less precisely the other can be measured.
    <img class="right" src="http://media2.juggledesign.com/qtip2/images/demos/spottedowl.jpg" alt="" title="Spotted Owl" width="180" height="274" />
  </p>
  <hr />
  <div id="demo2" style="background: black; color: white; width: 80px; height: 80px;">
    鼠标移过来
  </div>
  <hr />
  <hr />
  <div id="demo3" style="background: black; color: white; width: 80px; height: 80px;">
    鼠标移过来
  </div>
  <hr />
  <div id="demo4">
    AJAX演示 The Strigiformes (Owls) are an order of birds of prey, comprising 200 extant species. Owls mostly hunt small mammals, insects, and other birds, though a few species specialize in hunting fish.
    Most are solitary, and nocturnal, with some exceptions (e.g. the <a href="http://en.wikipedia.org/wiki/Burrowing_Owl" rel="ajax.txt">Burrowing Owl</a>). They are found in all regions of the Earth except
    Antarctica, most of Greenland, and some remote islands. Some, like the <a href="http://en.wikipedia.org/wiki/Snowy_Owl" rel="ajax.txt">Snowy Owl</a>, even inhabit some of the harshest environments on
    Earth, such as the Artic Circle.
  </div>
  <hr />
  <div id="demo5">
    位置及样式 In <a href="http://craigsworks.com/wiki/Quantum_mechanics" title="Wikipedia: Quantum mechanics">quantum mechanics</a>, the <b>Heisenberg uncertainty principle</b> states by precise inequalities
    that certain pairs of physical properties, such as position and <a href="http://craigsworks.com/wiki/Momentum" title="Wikipedia: Momentum">momentum</a>, cannot be simultaneously known to arbitrarily high
    precision. That is, the more precisely one property is measured, the less precisely the other can be measured.
  </div>
  <div id="demo6">
    位置及样式 
    that certain pairs of physical properties, such as position and <a href="http://craigsworks.com/wiki/Momentum" title="Wikipedia: Momentum">momentum</a>, cannot be simultaneously known to arbitrarily high
    precision. That is, the more precisely one property is measured, the less precisely the other can be measured.
  </div>
  <ul>
    <li>
      <label class="ttl"></label>
      <input class="btn" type="submit" value="提交" />
    </li>
  </ul>
</body>
</html>
